<!DOCTYPE html>
<html>

<head>
    <meta name="renderer" content="webkit">
    <!-- <meta content="IE=Edge" http-equiv="X-UA-Compatible"> -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>公共卫生网络信息监测系统</title>
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/manage-user.css">
    <script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../js/commen.js" type="text/javascript"></script>
    <script src="../js/manage-user.js" type="text/javascript"></script>
    <link href="../css/sy.css" rel="stylesheet" type="text/css"/>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/component.js"></script>
</head>

<body id="top">
<div id="app">
    <head-template></head-template>
    <div class="main">
        <div class="cw1200 clearfix">
            <system-menu-template active-menu="1"></system-menu-template>
            <div class="rightside fr w980">
                <div class="right-top clearfix">
                    <div class="rt-search">
                        <input class="rt-sec-input" type="text" maxlength="100" name="" placeholder="请输入检索词…"
                               v-model="queryData.username">
                        <input class="rt-sec-btn" type="button" name="" value="检索" v-on:click="initData()">
                    </div>
                    <a class="add-user-btn rtop-btn" href="javascript:;" v-on:click="showAdd()">新增用户</a>
                </div>
                <div class="user-list">
                    <span class="hide" id="checked-num"></span>
                    <table>
                        <thead>
                        <tr>
                            <th width="50">
                                <div class="checkbox" name="checkAll"><input type="checkbox"
                                                                             name="checkAll"><label></label></div>
                                序号
                            </th>
                            <th width="80">姓名</th>
                            <th width="245">电子信箱</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in userList">
                            <td widtd="50">
                                <div class="checkbox" name="check"><input type="checkbox" name="check"><label></label>
                                </div>
                                {{index}}
                            </td>
                            <td widtd="80">{{item.username}}</td>
                            <td widtd="245">{{item.email}}</td>
                            <td>
                                <a class="edit-user" href="javascript:;" v-on:click="showModify(item)">编辑</a>
                                <span>|</span>
                                <a class="delete-user" href="javascript:;" v-on:click="showDelete(item.id)">删除</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <page-template v-bind:total-count="totalCount" v-bind:query-data="queryData"
                                   v-bind:page-count="pageCount"></page-template>
                </div>
            </div>
            <!--rightside end-->
        </div>
    </div>
    <div class="main footer">
        <p>地址：北京市西城区白广路***********</p>
        <p>电话：010-83******</p>
        <p>版权所有：**省疾病预防控制中心&emsp;&emsp;网站备案：*ICP备********号</p>
    </div>
    <!-- 新增用户 -->
    <div class="win win-add-user">
        <div class="win-bg"></div>
        <div class="win-body">
            <h1><span>新增用户</span></h1>
            <div class="win-item clearfix">
                <span>姓名</span>
                <input type="text" name="" maxlength="20" v-model="user.username">
                <i>*</i>
            </div>
            <div class="win-item clearfix">
                <span>邮箱</span>
                <input type="text" name="" maxlength="50" v-model="user.email">
            </div>
            <div class="btns">
                <input class="btn btn-done" type="button" value="确定" v-on:click="addUser()"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
    <!-- 编辑用户 -->
    <div class="win win-edit-user">
        <div class="win-bg"></div>
        <div class="win-body">
            <h1><span>编辑用户</span></h1>
            <div class="win-item clearfix">
                <span>姓名</span>
                <input class="uname" type="text" name="" maxlength="20" v-model="user.username">
                <i>*</i>
            </div>
            <div class="win-item clearfix">
                <span>邮箱</span>
                <input class="udpt" type="text" name="" maxlength="20" v-model="user.email">
            </div>
            <div class="btns">
                <input class="btn btn-done" type="button" value="确定" v-on:click="modifyUser()"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
    <!-- 批量导入 -->
    <div class="win win-import">
        <div class="win-bg"></div>
        <div class="win-body">
            <h1><span>批量导入</span></h1>
            <div class="win-item clearfix">
                <span>选择本地文件</span>
                <div class="fileName"></div>
                <a class="fileBtn" href="javascript:;">浏览
                    <input id="file" class="fileInput" type="file">
                </a>
            </div>
            <div class="btns">
                <input class="btn btn-done" type="button" value="确定"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
    <!-- 成功 -->
    <div class="win win-success">
        <div class="win-bg"></div>
        <div class="win-body">
            <p>提交成功!</p>
            <div class="btns">
                <input class="btn btn-done" type="button" value="确定"
                       onclick="javascript:$(this).parents('.win-success').hide();"/>
            </div>
        </div>
    </div>
    <!-- 提醒选择操作对象 -->
    <div class="win win-check">
        <div class="win-bg"></div>
        <div class="win-body">
            <p>请选择要操作的对象！</p>
            <div class="btns">
                <input class="btn btn-done btn-close" type="button" value="确定"/>
            </div>
        </div>
    </div>
    <!-- 删除 -->
    <div class="win win-delete">
        <div class="win-bg"></div>
        <div class="win-body">
            <p>确认要删除该用户吗？</p>
            <div class="btns">
                <input class="btn btn-done" type="button" value="确定" v-on:click="deleteUser()"/>
                <input class="btn btn-quit" type="button" value="取消"/>
            </div>
        </div>
    </div>
</div>
<script src="../js/placeholder.js" type="text/javascript"></script>
<script src="../js/checkbox.js" type="text/javascript"></script>
</body>
<script type="text/javascript">
    $(function () {
        $(".user_name").append(localStorage.getItem("username"))
    })

    let app = new Vue({
        el: "#app",
        data: {
            queryData: {
                pageNum: 1,
                pageSize: 10,
                username: ""
            },
            totalCount: 0,
            pageCount: 0,
            userList: [],
            user: {}
        },
        methods: {
            initData() {
                axios.get("/users", {params: app.queryData}).then(function (res) {
                    let result = res.data.data;
                    if (res.data.code == 200) {
                        app.userList = result.list;
                        app.totalCount = result.total;
                        app.pageCount = result.pages;
                    }
                })
            },
            showAdd() {
                app.user = {};
            },
            addUser() {
                axios.post("/user", app.user).then(function (res) {
                    if (res.data.code == 200) {
                        $(".win-success").show();
                        app.initData();
                    }
                })
            },
            showModify(user) {
                app.user = {};
                app.user.id = user.id;
                app.user.username = user.username;
                app.user.email = user.email;
            },
            modifyUser() {
                axios.put("/user", app.user).then(function (res) {
                    if (res.data.code == 200) {
                        $(".win-success").show();
                        app.initData();
                    }
                })
            },
            showDelete(id) {
                app.user.id = id;
            },
            deleteUser() {
                axios.delete("/user/" + app.user.id).then(function (res) {
                    if (res.data.code == 200) {
                        $(".win-success").show();
                        app.initData();
                    }
                })
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.initData();
            })
        }
    })
</script>
</html>